<template>
	<div>
		<div class="header">




			<van-nav-bar style="  background: linear-gradient(90deg,#41A9B7,#4fd4e2, #41A9B7);height:5rem;line-height:5rem; 	">

				<span class="title" slot="title">位置选择</span>

				<span style="font-size:1.5625rem ; color: white; font-weight: 500;" slot="right">
					<van-button type="primary" color="#348994" @click="back">&nbsp;返&nbsp;&nbsp;&nbsp;回&nbsp;</van-button>
				</span>
			</van-nav-bar>
			<!-- <van-nav-bar title="智能供佛系统" style=" background: url(./images/系统标题部分.png);height: 80px;line-height: 80px; background-size:1142px 80px;background-repeat:no-repeat;">
				<van-icon name="search" slot="right" />
			</van-nav-bar> -->
		</div>









		<!-- /////////////////////////////////////////////////////////// -->
		<div class="content">

			<!-- 选择弹出层 -->







			<!-- <van-popup v-model="showPicker" position="top">
				
			</van-popup> -->
			<!-- 选择过滤器  -->
			<div id="preSelect" style="  		height: 3.4375rem;	margin-top:1rem;	line-height:3.4375rem; font-size: 1.25rem;color: wheat; font-weight: bold; width:98% ;">
				<van-row gutter="4">

					<van-col style="margin-left: 2%;" span="3"> <span>追思间：</span></van-col>

					<van-col span="3">
						<el-select v-model="room" placeholder="选择宫殿" @change="changeRoom">
							<el-option v-for="item in options0" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>

					</van-col>

					<van-col span="3">

						<el-select v-model="tier" placeholder="选择分区" @change="changeTier">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</van-col>


					<van-col span="6">

						<!-- 	<span>供佛时长：</span>
						<el-select style="width: 110px;" v-model="durationTime" placeholder="供佛时长" @change="changeDurationTime">
							<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select> -->


					</van-col>


					<van-col span="3"> <span>已供：{{ispriceCount}}</span></van-col>
					<van-col span="3"> <span>待供：{{totalCount-ispriceCount}}</span></van-col>


					<!-- <van-col span="2"> <span>应付金额：</span></van-col> -->
					<!-- <el-button type="primary" disabled>返回</el-button> -->
					<!-- <van-col span="3">
					<van-button size="large" style="width: 100px;" color="#CC4117">退出</van-button>
					</van-col> -->









				</van-row>

			</div>

			<!--  background: #C15618;  -->
			<div style="height: 73%;  width: 96%; margin-left: 2%; background: #348994; border-radius: 10px;  padding: 5px">
				<!--  -->

				<!--  选择区域	-->
				<div class="select" style="  overflow: auto;   height: 100%;  margin-top: 5px 0; white-space: nowrap;">
					<van-loading type="spinner" color="#1989fa" size="80px" v-if="load" style="margin-top: 15%;" />

					<ul v-else v-show="domShow">
						<!-- li一个v-for ，里面内容img在一个v-for-->
						<li v-for="led_row in ledList" style="margin-top: 0rem;margin-bottom: -0.5rem;">



							<div v-for="led,key in led_row" style="	position: relative;	display: inline-block; text-align: center; ">

								<van-image width="4rem" height="4rem" fit="cover" :src="(led.state==5?images[3]:(led.isprice?images[2]:(led.ifchoose?images[1]:images[0])))"
								 @click="choose(led,key)" style="margin :0.5rem;" />

								<!-- position: absolute; left: 2rem;bottom: 1rem; -->
								<span 
								style="display: block;	font-size: 0.7rem; color: #dfbd7a;  position: absolute; left: 0;  right: 0; bottom: 0.79rem;  margin: auto;	text-align: center;	z-index: 10;">{{led.code}}</span>



							</div>


							<!-- <van-image width="4rem" height="4rem" fit="cover" :src="(led.state==5?images[3]:(led.isprice?images[2]:(led.ifchoose?images[1]:images[0])))"
							 @click="choose(led,key)" v-for="led,key in led_row" style="margin :0.5rem;" /> -->


						</li>
					</ul>
				</div>


			</div>




			<!-- 			<div class="gf" style="background: #C15618;">
				<van-row type="flex" justify="center">
					<van-col span="22">
						<div style="  overflow: auto;   height: 600px; margin-top: 50px; ">
							<van-image width="4rem" height="4rem" fit="cover" :src="(led.ifchoose?images[1]:images[0])" @click="choose(led,key)"
							 v-for="led,key in ledList" style="margin :0.5rem;" />
						</div>
					</van-col>
				</van-row>
			</div> -->


			<!-- /////////////// -->

			<div style="  height: 3.4375rem; line-height:3.4375rem; 	margin-bottom: 1%;		margin-top: 1%; font-size: 1.25rem;color: wheat; font-weight: bold;">
				<van-row gutter="0">
					<van-col span="10"><span style="">已选遗像位：</span>
						<span style="color: #FFAE00;">{{chooseLedList|ledName}}</span>
					</van-col>
					<van-col span="4">
						<!-- 	<span>功德：</span> <span style="color: #FFAE00;">{{totalFee}}元</span> -->
					</van-col>
					<van-col span="3"> <span></span></van-col>
					<van-col span="3"> <span></span></van-col>


					<van-col span="3">
						<van-button type="primary" color="#217a68" size="large" @click="toGongfoStep0">下一步</van-button>


					</van-col>
				</van-row>





			</div>




			<!-- 	<div class="ledList">



			</div> -->




		</div>
		<!-- /////////////////////////////////////////////////////////// -->
	</div>

</template>

<script>
	export default {


		data() {
			return {

				ddd: [{
					"id": 0,
					"price": 0.01,
					"title": "一天",
					"day": 1
				}, {
					"id": 1,
					"price": 30,
					"title": "一月",
					"day": 30
				}, {
					"id": 2,
					"price": 365,
					"title": "一年",
					"day": 365
				}, {
					"id": 3,
					"price": 3650,
					"title": "十年",
					"day": 3650
				}],

				domShow: false,

				totalFee: 0,

				price: 0, //单价
				//[{"title":"大宝殿","create_time":1559266057735,"tid":1,"where":"东边","id":0},{"title":"承德殿","create_time":1559266922188,"tid":1,"where":"西边","id":1}]

				totalCount: 0,
				ispriceCount: 0,
				options: [{
					value: '0',
					label: 'A区'
				}, {
					value: '1',
					label: 'B区'
				}, {
					value: '2',
					label: 'C区'
				}, {
					value: '3',
					label: 'D区'
				}, {
					value: '4',
					label: 'E区'
				}],
				tier: '0',

				options0: [{
					value: '0',
					label: '大雄宝殿'
				}, {
					value: '1',
					label: '观音阁'
				}],
				room: '0',

				options2: [{
					value: '0',
					label: '一天'
				}, {
					value: '1',
					label: '一周'
				}],
				durationTime: '0',

				show: '',

				value: '',
				showPicker: false,
				columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
				chooseLedList: [],
				chooseStr: "",
				ledList: [{ //按row分组
					ifchoose: 0,
					name: "长明灯A1"
				}],
				templeData: {},
				priceData: {},
				//图片1，无状态，2选中，3已售，4填充
				images: ["./images/foxiangguan.png", "./images/choosed.png", "./images/foxiang.png", "./images/tianchontu.jpg"],
				load: true


			}
		},
		filters: {


			//[{"title":"一天","create_time":1545960786279,"tid":null,"day":1,"price":0.01},{"title":"一个月","create_time":1545960801124,"tid":null,"day":30,"price":60},{"title":"半年","create_time":1545960818376,"tid":null,"day":180,"price":180},{"title":"一年","create_time":1545960830201,"tid":null,"day":365,"price":365}]
			//过滤数据用作显示
			ledName(value) {

				let str = "";
				for (let i = 0; i < value.length; i++) {

					if (i == value.length - 1) {

						str = str + value[i].code;

					} else {
						str = str + value[i].code + ","

					}
				}
				if (str.length > 20) {
					str = str.substring(0, 20) + "....";
				}


				return str;
			}

		},
		methods: {

			toGongfoStep0() {
				//判断用户是否选择佛龛
				if (this.chooseLedList.length) {


					//旧版，一体机录入用户信息页面
					/* 	this.$router.push({
							path: '/GongfoStep0',
							query: {
								total_fee: this.totalFee,
								ledList: this.chooseLedList,
								day: this.durationTime
							}
						}); */

					//二维码，微信填写
					this.$router.push({
						path: '/GongfoStep01',
						query: {
							total_fee: this.totalFee,
							ledList: this.chooseLedList,
							day: this.durationTime
						}
					});



				} else {
					this.$toast.fail("请先选择要存放遗像的龛位")
				}

			},

			changeRoom() {
				let options = [];
				let data = JSON.parse(this.templeData.tierlist);
				for (let i = 0; i < data.length; i++) {
					if (data[i].where == this.room) {
						options.push({
							value: data[i].id,
							label: data[i].title
						})
					}

				}
				console.log("options0=================", options)
				this.options = options;
				this.tier = this.options[0].value;
				console.log("this.tier=================", this.tier)
				this.getLedList();
			},
			changeTier() {
				this.getLedList();


			},
			changeDurationTime() {

				//console.log(this.options2)

				//重新定价
				for (let i = 0; i < this.options2.length; i++) {
					//	console.log(parseFloat(this.options2[i].price).toFixed(2))

					if (this.options2[i].value == this.durationTime) {
						this.price = parseFloat(this.options2[i].price).toFixed(2);

						console.log(this.price);
						break;
					}
				}

				//重新计算价格
				let p = this.price * this.chooseLedList.length;
				this.totalFee = p;

			},

			pikerChange(value) {
				console.log(value);
				//this.value = value;
				this.showPicker = false;
			},
			getContainer() {
				return document.querySelector('.content');
			},

			onConfirm(value) {
				console.log('confirm:', value);
				this.value = value;
				this.showPicker = false;
			},

			choose(led, key) {

				if (led.isprice || (led.state == 5)) {

				} else {


					//更新选择状态
					if (led.ifchoose) {
						console.log("取消选了一个！")
						led.ifchoose = 0;
						for (let i = 0; i < this.chooseLedList.length; i++) {

							if (led.id == this.chooseLedList[i].id) {
								this.chooseLedList.splice(i, 1);
							}
						}

					} else {
						console.log("选了一个！")
						led.ifchoose = 1;
						this.chooseLedList.push({
							id: led.id,
							code: led.code
						});

					}

					//重新计算价格
					this.totalFee = this.price * this.chooseLedList.length;
				}




			},

			getLedList() {
				this.load = true;
				this.domShow = false;
				//获取led按行数据
				this.axios.post('https://mianmianshi.com/cms/temple/user/led', {
						room: this.room,
						tier: this.tier,
						tid: this.$store.getters.getTid | localStorage.tid

					})
					.then((res) => {
						console.log("res->", res);
						this.ledList = res.data.data.data;
						console.log("ledList->", this.ledList);




						//////////
						this.doLedList();
						console.log("ledListNOW!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
						console.log(this.ledList);

						this.load = false;
						this.$nextTick(() => {
							setTimeout(() => {
								this.domShow = true;
							}, 100)

						});


						/* 	setTimeout(()=>{
								this.load = false;
							},2000); */
					})
					.catch(function(error) {
						//this.mes = "未找到该用户，请检查是否输入错误";
						console.log(error);
					});

				//获取led数据


				this.axios.post('https://mianmianshi.com/cms/temple/client/ispriceCount', {
						where: {
							tid: this.$store.getters.getTid | localStorage.tid
						}
					})
					.then((res) => {
						console.log("res->", res);

						console.log("ledcount->", res.data);

						this.totalCount = res.data.totalCount;
						this.ispriceCount = res.data.ispriceCount;
					})
					.catch(function(error) {
						//this.mes = "未找到该用户，请检查是否输入错误";
						console.log(error);
					});

			},
			doLedList() {
				let tem_ledList = this.ledList; //使用临时变量，避免遍历中途改变数组状态可能会导致指针异常
				let tc = {
					state: 5
				}; //填充数据

				for (let e = 0; e < tem_ledList.length; e++) {
					////先检查头一个是不是空着的
					/* let first_gap=tem_ledList[e][0].column-1;
					if(first_gap>0){
						this.ledList[e].splice(0,0,tc);
					} */


					////先检查头一个是不是空着的
					let first_gap = tem_ledList[e][0].column - 1;
					for (let i = 0; i < first_gap; i++) {
						this.ledList[e].splice(i, 0, tc);
					}



					for (let i = 0; i < tem_ledList[e].length; i++) {

						if (i + 1 < tem_ledList[e].length) { //避免越界
							let gap = tem_ledList[e][i + 1].column - tem_ledList[e][i].column;
							if (gap > 1) { //5-3>1实际空1个
								for (let j = i + 1; j < gap + i; j++) { //j
									this.ledList[e].splice(j, 0, tc); //这个函数省了一堆代码
								}
							}
						}

					}
					//////
				}
			},

			initData() {
				//
				this.templeData = this.$store.getters.getTempleData;


				//宫殿room
				let data0 = JSON.parse(this.templeData.addresslist);
				console.log("data0=====================", data0);
				let options0 = [];
				for (let i = 0; i < data0.length; i++) {
					options0.push({
						value: data0[i].id,
						label: data0[i].title
					})
				}
				console.log("options0=================", options0)
				this.options0 = options0;
				this.room = 0;


				//殿内分区
				let data = JSON.parse(this.templeData.tierlist);
				console.log("data0=====================", data0);
				let options = [];
				for (let i = 0; i < data.length; i++) {
					if (data[i].where == this.room) {
						options.push({
							value: data[i].id,
							label: data[i].title
						})
					}

				}
				console.log("options0=================", options)
				this.options = options;
				this.tier = 0;

				//供灯时长
				let data2 = JSON.parse(this.templeData.led_price);
				console.log("data0=====================", data2);
				let options2 = [];
				for (let i = 0; i < data2.length; i++) {
					options2.push({
						value: data2[i].day,
						label: data2[i].title,
						price: data2[i].price
					}, )
				}
				console.log("options0=================", options)
				this.options2 = options2;
				this.durationTime = this.options2[0].value; //默认


				//初始化价格
				for (let i = 0; i < this.options2.length; i++) {
					//	console.log(parseFloat(this.options2[i].price).toFixed(2))

					if (this.options2[i].value == this.durationTime) {
						this.price = parseFloat(this.options2[i].price).toFixed(2);

						console.log(this.price);
						break;
					}
				}

			},
			back() {
				//this.$router.go(-1);
				this.$router.push("homePage");
			}


		},

		beforeCreate() {

		},

		created() {

			this.getLedList();
			this.initData();





		},
		mounted() {


			/* this.$nextTick(()=>{
				this.load = false;
			}) */

			//this.load=false;

		}

	}
</script>

<style>
	.title {

		color: #FFFFFF;
		font-size: 3.125rem;
	}


	/* 
 
消除滚动条，牛逼 
 */
	.select::-webkit-scrollbar {
		display: none
	}




		{
		/* scrollbar-3dlight-color: #fff; // 3d亮色阴影边框(threedlightshadow)的外观颜色 */
		/* scrollbar-highlight-color: #fff; // 滚动条3d高亮边框(threedhighlight)的外观颜色
		scrollbar-arrow-color: #fff; // 滚动条方向箭头的颜色
		scrollbar-shadow-color: #fff; // 滚动条方向箭头的颜色
		scrollbar-darkshadow-color: #fff; // 滚动条3d暗色阴影边框(threeddarkshadow)的外观颜色
		scrollbar-base-color: #fff; // 滚动条基准颜色
		scrollbar-track-color: #fff; // 滚动条拖动区域的外观颜色 */
	}

	ul li {}






	.gf {
		/* border: solid 1px;
		width: 100%;
		 position: absolute;
		    top: 0px;
		    bottom: 0px; */
	}
</style>
